<!-- 消息框 -->
<template>
	<div class="message" v-if="selectedChat" style="display: flex;flex-direction: column">
		<header class="header" style="flex-shrink: 0;">
			<div class="friendname">{{model == 1 ? selectedChat.user.name : selectedChat.groupName}}</div>
            <div @click="fetchMembers" v-if="model == 2"><i class="el-icon-more"></i></div>
		</header>
		<div class="message-wrapper" ref="list" style="flex: 1">
		    <ul v-if="selectedChat">
		    	<li v-for="item in selectedChat.messages" class="message-item" :key="item.id">
		    		<div class="time"><span>{{item.date | time}}</span></div>
		    		<div class="main" :class="{ self: item.self }">
                        <img class="avatar" width="36" height="36" :src="'http://im.wzhwgg.com:8070/wechatwebsite/images/default.png'" />
                        <!-- <img class="avatar" width="36" height="36" :src="'http://m.hhkj-life.com/wechatwebsite/' + (item.self ? user.img : selectedChat.user.img)" /> -->
                        <div :style="!item.self ? 'display: flex; flex-direction: column;align-items: flex-start;' : ''">
                            <div v-if="model == 2 && !item.self" style="font-size: 10px;color: #666;margin: 0 0 8px 10px">
                                {{item.username}}
                            </div>
                            <div class="content" v-if="item.content && item.content.indexOf('file') != 0 && item.content.indexOf('img') != 0">
                                <div class="text" v-html="item.content">{{item.content}}</div>
                            </div>
                            <div class="content" v-if="item.content.indexOf('file') == 0">
                                <div style="display: flex;">
                                    <div class="file" 
                                        @click="downloadFile(item.content.substring(item.content.lastIndexOf('(') + 1, item.content.lastIndexOf(')')),
                                        item.content.substring(item.content.lastIndexOf('[') + 1, item.content.lastIndexOf(']')))">
                                        <i class="el-icon-folder" style="font-size: 40px"></i>
                                    </div>
                                    <div class="text">{{item.content.substring(item.content.lastIndexOf('[') + 1, item.content.lastIndexOf(']'))}}</div>
                                </div>
                            </div>
                            <div class="content" v-if="item.content.indexOf('img') == 0">
                                <img class="fileimg" @click="downloadFile(item.content.substring(item.content.lastIndexOf('[') + 1, item.content.lastIndexOf(']')))" :src="item.content.substring(item.content.lastIndexOf('[') + 1, item.content.lastIndexOf(']'))" alt="">
                            </div>
                        </div>
                    </div>
		    	</li>
		    </ul>
		</div>
        <el-drawer
        title="成员"
        :visible.sync="showMembers"
        :direction="'rtl'"
        >
            <div class="chatmemberContent">
                <div class="plus" @click="fetchAllMembers">
                    <i class="el-icon-plus"></i>
                </div>
                <div>
                    <div v-for="item in members" :key="item.index" style="display: flex;align-items: center;">
                        <img class="avatar"  width="42" height="42" style="display: block;margin: 20px 10px 10px 0" :src="'http://im.wzhwgg.com:8070/wechatwebsite/images/default.png'">
                        {{item.realName}}
                    </div>
                </div>
            </div>
        </el-drawer>
        <el-dialog
        title="所有成员"
        :visible.sync="showAddmembers"
        width="80%"
        >
        <div>
            <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                style="width: 250px;margin-bottom: 10px"
                v-model="name">
            </el-input>
            <el-button type="primary" @click="fetchAllMembersByName">搜索</el-button>
        </div>
        <div style="max-height: 300px;overflow-y: auto">
            <div style="display: flex;flex-wrap: wrap;">
                <div class="memberitem" :class="item.checked ? 'checked' : ''" v-for="item in allMembers" :key="item.index" style="display: flex;align-items: center; width: 120px" @click="item.checked = !item.checked">
                    <img class="avatar"  width="42" height="42" style="display: block;margin: 0 10px 0 0" :src="'http://im.wzhwgg.com:8070/wechatwebsite/images/default.png'">
                    {{item.realName}}
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showAddmembers = false">取 消</el-button>
            <el-button type="primary" @click="confirmMembers">确 定</el-button>
        </span>
        </el-dialog>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
    data() {
        return {
            showMembers: false,
            showAddmembers: false,
            members: [],
            allMembers: [],
            name: ''
        }
    },
    computed: {
        ...mapGetters([
            'selectedChat',
            'messages'
        ]),
        ...mapState([
            'user',
            'emojis',
            'model',
            'selectGroupId'
        ])
    },
    updated() {
         //  在页面加载时让信息滚动到最下面
        if (this.$refs.list) {
            setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
        }
    },
    methods: {
        async fetchMembers() {
            this.showMembers = true
            const { data: object } = await 
                this.$http.get(`/api/group/getMemberByGroupId.do?groupId=${this.selectGroupId}`)
            this.members = object.object
        },
        async fetchAllMembers() {
            this.showAddmembers = true
            const { data: object } = await 
                this.$http.get(`/api/groupMessage/getNewMemberByGroupId.do?groupId=${this.selectGroupId}&memberId=${this.user.memberId}`)
            object.object.forEach(item => {
                this.$set(item, 'checked', false)
            })
            this.allMembers = object.object
        },
        async fetchAllMembersByName() {
            this.showAddmembers = true

            let params =  new FormData()
            params.append('name', this.name)
            const { data: object } = await 
                this.$http.post(`/api/groupMessage/getNewMemberByGroupId.do`, params)
            object.object.forEach(item => {
                this.$set(item, 'checked', false)
            })
            this.allMembers = object.object
        },
        async confirmMembers() {
            let memberIds = []
            this.allMembers.forEach(item => {
                if (item.checked) {
                    memberIds.push(item.id)
                }
            })

            let params =  new FormData()
            params.append('memberIds', memberIds)
            params.append('groupId', this.selectGroupId)

            const { data: object } = await 
                this.$http.post(`/api/group/batchAdd.do`, params)
            this.showAddmembers = false
            this.fetchMembers()
        },
        downloadFile(url, name) {
            var a = document.createElement('a');          
            a.href = `http://im.wzhwgg.com:8070/wechatwebsite/fileController/downloadFile.do?downLoadPath=${url}&fileName=${name ? name : 'image'}`     
            a.click()
        }
    },
    watch: {
        // 发送信息后,让信息滚动到最下面
        messages() {
            if (this.$refs.list) {
                setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
            }
        }
    },
    filters: {
            // 将日期过滤为 hour:minutes
            time (date) {
                if (typeof date === 'string') {
                    date = new Date(date);
                }
                if(date.getMinutes()<10){
                  return date.getHours() + ':0' +date.getMinutes();
                }else{
                  return date.getHours() + ':' + date.getMinutes();
                }
            }
    }
}
</script>

<style lang="stylus" scoped>
   .message
      width: 100%
      height: 370px
      .header
        height: 60px
        padding: 28px 30px 0
        box-sizing: border-box
        border-bottom: 1px solid #e7e7e7
        display: flex
        justify-content: space-between
        .friendname
            font-size: 18px
      .message-wrapper
        padding: 10px 15px
        background-image : url("../../assets/images/chat-bg.png");
        background-size : 100% 100%
        box-sizing: border-box
        overflow-y: auto
        border-bottom: 1px solid #e7e7e7
        .message
            margin-bottom: 15px
        .time
            width: 100%
            font-size: 12px
            margin: 7px auto
            text-align: center
            span
                display: inline-block
                padding: 4px 6px
                color: #fff
                border-radius: 3px
                background-color: #dcdcdc
        .main
            .avatar
                float: left
                margin-left: 15px
                border-radius: 3px
            .content
                display: inline-block
                margin-left: 10px
                position: relative
                padding: 6px 10px
                max-width: 330px
                min-height: 36px
                line-height: 24px
                box-sizing: border-box
                font-size: 14px
                text-align: left
                word-break: break-all
                background-color: #fafafa
                border-radius: 4px
                &:before
                    content: " "
                    position: absolute
                    top: 12px
                    right: 100%
                    border: 6px solid transparent
                    border-right-color: #fafafa
        .self
            text-align: right
            .avatar
                float: right
                margin:0 15px
            .content
                background-color: #b2e281
                &:before
                    right: -12px
                    vertical-align: middle
                    border-right-color: transparent
                    border-left-color: #b2e281
</style>
<style>
.memberitem {
    margin: 10px 10px 10px 0;
    border: 1px solid transparent
}
.memberitem:hover {
    cursor: pointer;
    opacity: .7
}
.checked {
    border: 1px solid #00dc41
}
.chatmemberContent {
    padding: 0 20px;
}
.plus {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    color: #ccc;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border: 1px dashed #ccc;
}
.plus:hover {
    border: 1px dashed #00dc41;
    color: #00dc41;
}
.file {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.fileimg {
    width: 100px;
    height: 100px;
}
</style>
